import "./index.css";
import { LeftCircleOutlined } from "@ant-design/icons";

import { Card, Collapse } from "antd";
import { useEffect, useState } from "react";

const { Panel } = Collapse;


const ListCard = (props) => {
  const [data, setdata] = useState([]);
  const [key, setkey] = useState(1);

  const onChange = (key) => {
    setkey(key[0]);
  };
  useEffect(() => {
    setdata(props.ListData);
  }, [data]);
  return (
    <div className="snuerixis">
      {data.length !== 0 ? (
        <>
          {data.map((item, index) => (
            <div  key={index} className={key == index + 1 ? "cbuseing" : ""}>
              <Card
                hoverable
                style={{ width: 300 }}
                cover={
                  <img
                    alt="example"
                    src={[require("../../assets/img/List-item-3.png")]}
                  />
                }
              >
                <Collapse
                  defaultActiveKey={['1']}
                  bordered={false}
                  onChange={onChange}
                  expandIcon={({ isActive }) => (
                    <LeftCircleOutlined rotate={isActive ? -90 : 0} />
                  )}
                >
                  <Panel header={item.title} key={index + 1}>
                    <span>{item.description}</span>
                  </Panel>
                </Collapse>
              </Card>
      
            </div>
          ))}
        </>
      ) : (
        ""
      )}
    </div>
  );
};

export default ListCard;
